<template>
  <div class="backend-detail">
    <div class="detail-info">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span v-if="flowType == 1">基层理论宣讲集体详情</span>
            <span v-else-if="flowType == 2">基层理论宣讲个人详情</span>
            <span v-else-if="flowType == 3">优秀理论宣讲报告详情</span>
            <span v-else-if="flowType == 4">优秀理论宣讲报告微视频详情</span>
            <el-button type="primary" @click="goList">返回列表</el-button>
          </div>
        </template>

        <div v-loading="loading">
          <el-row class="detail-item" v-if="flowType == 1 || flowType == 2">
            <el-col :span="3" class="detail-label">事迹材料（文字）：</el-col>
            <el-col :span="21">{{ advancedDetail.factualMaterials }}</el-col>
          </el-row>

          <el-row class="detail-item" v-if="flowType == 3">
            <el-col :span="3" class="detail-label">宣讲报告（文字）：</el-col>
            <el-col :span="21">{{ advancedDetail.report }}</el-col>
          </el-row>

          <el-row class="detail-item" v-if="flowType == 3">
            <el-col :span="3" class="detail-label">宣传情况简介：</el-col>
            <el-col :span="21">{{ advancedDetail.briefing }}</el-col>
          </el-row>

          <el-row class="detail-item" v-if="flowType != 4">
            <el-col :span="3" class="detail-label">报刊宣传：</el-col>
            <el-col :span="21">{{ advancedDetail.promotionSituation }}</el-col>
          </el-row>

          <el-row class="detail-item" v-if="flowType == 1 || flowType == 2">
            <el-col :span="3" class="detail-label">获奖情况：</el-col>
            <el-col :span="21">{{ advancedDetail.awards }}</el-col>
          </el-row>

          <el-row class="detail-item" v-if="flowType == 4">
            <el-col :span="5" class="detail-label">视频创作传播相关情况说明：</el-col>
            <el-col :span="19">
              {{ advancedDetail.briefing }}
            </el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="flowType == 4 ? 5 : 3" class="detail-label">{{ flowType == 4 ? '报道传播截图：' : '图片：' }}</el-col>
            <el-image style="width: 200px;" :src="reFileResult(advancedDetail.picture)" fit="cover">
              <template #error>
                <div class="image-slot">
                  <el-image style="width: 200px;" src="/images/course_default.png" fit="cover" />
                </div>
              </template>
            </el-image>
          </el-row>

          <el-row class="detail-item" v-if="flowType != 3 && flowType != 4">
            <el-col :span="3" class="detail-label">视频：</el-col>
            <video
              ref="videoRef"
              :src="advancedDetail.video ? reFileResult(advancedDetail.video) : ''"
              :width="313"
              :height="170"
              muted
              controls
              loop
              showPlay
              controlslist="nodownload"
            ></video>
          </el-row>

          <el-row class="detail-item" v-if="flowType == 4">
            <el-col :span="5" class="detail-label">微视频：</el-col>
            <video
              ref="videoRef"
              :src="advancedDetail.microVideo ? reFileResult(advancedDetail.microVideo) : ''"
              :width="313"
              :height="170"
              muted
              controls
              loop
              showPlay
              controlslist="nodownload"
            ></video>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="flowType == 4 ? 5 : 3" class="detail-label">状态：</el-col>
            <el-col :span="flowType == 4 ? 19 : 21">{{ checkStatusFormat(advancedDetail.checkStatus) }}</el-col>
          </el-row>
          
        </div>
      </el-card>
    </div>

    <div class="detail-opera">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>控制面板</span>
          </div>
        </template>

        <div class="opera-button">
          <el-dropdown>
            <el-button type="primary" circle>
              <el-icon ><More /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editAdvanced" v-if="advancedDetail.checkStatus == 0">编辑</el-dropdown-item>
                <el-dropdown-item @click="deleteAdvanced">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-card>

      <approval-node type="fund" :flowId="route.query.flowId" v-if="route.query.flowId"/>
    </div>
  </div>
  
</template>

<script>
export default { name: 'backendPublicizeadvancedDetail' }
</script>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { More } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import tEditor from "@/components/tinymceEditor/tEditor.vue"
import { http } from '@/utils/http/index';
import { format } from '@/plugins/moment.js'
import { checkStatusFieldFormat, reFileResult } from "@/utils/backend.js"
import approvalNode from '@/components/backend/approvalNode.vue';

/* 路由 */
const router = useRouter()
const route = useRoute()

const flowType = computed(() => {
  const current = route.path.replace(/\/backend/g, '')
  // 宣讲集体
  if (current == '/publicize-collectiveness/detail') return 1
  // 先进个人
  if (current == '/publicize-personal/detail') return 2
  // 优秀理论宣讲报告
  if (current == '/publicize-report/detail') return 3
  // 优秀理论宣讲微视频
  if (current == '/publicize-video/detail') return 4
  return ''
})

onMounted(() => {
  getAdvancedDetail()
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情内容 */
const advancedDetail = ref({})

const checkStatusFormat = (status) => {
  return status == '1' || status == '0'  ? '待审批' : status == '2' ? '审批通过' : status == '3' ? '审批未通过' : ''
}

/* 获取详情内容 */
const getAdvancedDetail = () => {
  loading.value = true
  http.$GET("/PreachM/GetPreachFillingDetailById", { Id: route.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    if (!res.result) return
    advancedDetail.value = res.result
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败")
  })
}

/* 编辑 */
const editAdvanced = () => {
  let url;
  // 宣讲集体
  if (flowType.value == 1) url = '/backend/publicize-collectiveness/add'
  // 先进个人
  if (flowType.value == 2) url = '/backend/publicize-personal/add'
  // 优秀理论宣讲报告
  if (flowType.value == 3) url = '/backend/publicize-report/add'
  // 优秀理论宣讲微视频
  if (flowType.value == 4) url = '/backend/publicize-video/add'

  router.push({
    path: url,
    query: { id: route.query.id, type: 'edit' }
  })
}

/* 删除 */
const deleteAdvanced = () => {
  ElMessageBox.confirm(
    '确定要删除此条数据吗？',
    '请确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    http.$POST(`/PreachM/DelPreachFillingById?Id=${route.query.id}`).then(res => {
      if (res.IsError) {
        ElMessage.warning("操作失败")
      }else {
        ElMessage.success("删除成功")
        let url;
        // 宣讲集体
        if (flowType.value == 1) url = '/backend/publicize-collectiveness'
        // 先进个人
        if (flowType.value == 2) url = '/backend/publicize-personal'
        // 优秀理论宣讲报告
        if (flowType.value == 3) url = '/backend/publicize-report'
        // 优秀理论宣讲微视频
        if (flowType.value == 4) url = '/backend/publicize-video'

        router.push({
          path: url
        })
      }
    }).catch(err => {
      ElMessage.warning("操作失败")
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}

/* 返回列表 */
const goList = () => {
  let url;
  // 宣讲集体
  if (flowType.value == 1) url = '/backend/publicize-collectiveness'
  // 先进个人
  if (flowType.value == 2) url = '/backend/publicize-personal'
  // 优秀理论宣讲报告
  if (flowType.value == 3) url = '/backend/publicize-report'
  // 优秀理论宣讲微视频
  if (flowType.value == 4) url = '/backend/publicize-video'

  router.push({
    path: url,
    query: route.query.currentPage ? { currentPage: route.query.currentPage } : {}
  })
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>